<template>
  <div class="box1">
    <el-form-item label="名称和地址" label-width="120px" style="width:94%">
      <div v-for="(item,index) in info" :key="index" class="sysItem">
        <el-select v-if="item.hasOwnProperty('notFrist')" v-model="item.boolType" style="width:80px;margin-right:10px">
          <el-option label="AND" value=1></el-option>
          <el-option label="OR" value=2></el-option>
          <el-option label="NOT" value=3></el-option>
        </el-select>
        <el-select v-if="!item.hasOwnProperty('notFrist')" v-model="item.key" placeholder="--请选择--"
                   style="width:300px;margin-bottom:6px">
          <el-option label="申请人" value="applicants"></el-option>
          <el-option label="发明人" value="inventors"></el-option>
          <el-option label="当前权利人" value="assignees"></el-option>
          <el-option label="代理机构" value="agency"></el-option>
        </el-select>

        <el-select v-if="item.hasOwnProperty('notFrist')" v-model="item.key" placeholder="--请选择--"
                   style="width:210px;margin-bottom:6px">
          <el-option label="申请人" value="applicants"></el-option>
          <el-option label="发明人" value="inventors"></el-option>
          <el-option label="当前权利人" value="assignees"></el-option>
          <el-option label="代理机构" value="agency"></el-option>
        </el-select>

        <el-input v-if="item.key=='applicants'" class="inputView" placeholder="可输入完整或部分申请人名称,例如:华为"
                  v-model="item.value"></el-input>
        <el-input v-if="item.key=='inventors'" class="inputView" placeholder="可输入完整或部分发明人名称,例如:张三"
                  v-model="item.value"></el-input>
        <el-input v-if="item.key=='assignees'" class="inputView" placeholder="可输入完整或部分当前专利权人名称,例如:西门子"
                  v-model="item.value"></el-input>
        <el-input v-if="item.key=='agency'" class="inputView" placeholder="可输入完整或部分代理机构名称,例如,北京专利代理"
                  v-model="item.value"></el-input>


        <i @click="addName"
           style="position:absolute;right:-30px;fontSize:20px;marginTop:5px;color:#008ac0;font-weight:700"
           v-if="!item.hasOwnProperty('notFrist')" class="el-icon-circle-plus-outline"></i>
        <i @click="deltNameAndAddress(index)"
           style="position:absolute;right:-30px;fontSize:20px;marginTop:5px;color:#008ac0;font-weight:700"
           v-if="item.hasOwnProperty('notFrist')" class="el-icon-remove-outline"></i>
      </div>

    </el-form-item>
  </div>
</template>

<script>
  export default {
    name: "NameAndAddress",
    props: {},
    watch: {
      info: {
        handler(newV, OldV) {

          this.$emit("done", this.translateForm(newV))

        },
        deep: true
      }

    },
    data() {
      return {
        result: [],
        info: [{
          value: '',
          key: "applicants"
        },
          {
            value: "",
            notFrist: true,
            boolType: "1",
            key: "inventors"
          },
          {
            value: "",
            notFrist: true,
            boolType: "1",
            key: "assignees"
          },
          {
            value: "",
            notFrist: true,
            boolType: "1",
            key: "agency"
          }

        ]
      }
    },
    methods: {
      translateForm(newV) {
        let keys = ["applicants", "inventors", "assignees", "agency"]

        let tempArr = []
        let list = JSON.parse(JSON.stringify(newV))
        list.forEach(item => {
          if (item.hasOwnProperty("key") && item.value.trim()) {
            let obj = {
              fieldName: item.key,
              value: item.value,
              boolType: item.hasOwnProperty("boolType") ? item.boolType : 1
            }
            tempArr.push(obj)

          }
        })

        return tempArr

      },

      addName() {
        if (this.info.length < 4) {
          let obj = {
            value: "",
            notFrist: true,
            boolType: "1"
          }
          this.info.push(obj)
        }
      },
      deltNameAndAddress(index) {
        //  console.log(index)
        this.info.splice(index, 1);

      },
    }
  }
</script>

<style lang="scss" scoped>
  .box1 {
    width: 100%;
    background-color: #ffffff;

    // height:40px;
    ::v-deep .el-form-item__label {
      text-align: left;
      font-size: 12px;
      // color: red;
    }

    .sysItem {
      width: 100%;
      display: flex;
      flex-direction: row;

      .inputView {
        flex: 1;
        margin-left: 10px;
      }
    }
  }
</style>
